<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '走进艺术家',
    enablePullDownRefresh: true,
  },
}
</route>
<template>
  <div class="list">
    <wd-sticky>
      <div class="input-box">
        <div class="input">
          <wd-input
            v-model="filter.artName"
            placeholder="请输入艺人名称搜索"
            clearable
            prefix-icon="search"
            no-border
            @change="getData()"
          />
        </div>
      </div>
      <div class="tab">
        <wd-tabs v-model="tab" swipeable :lineWidth="0" @change="tabChange" :show-scrollbar="false">
          <wd-tab
            v-for="(item, index) in tabList"
            :key="index"
            :title="item.title"
            :name="item.value"
          ></wd-tab>
        </wd-tabs>
      </div>
    </wd-sticky>

    <LoadPage ref="loadPage" url="/artist-authorized-app/open/page">
      <template #default="{ list }">
        <div class="people-list" v-if="list.length > 0">
          <div
            class="people"
            v-for="(item, index) in list"
            :key="index"
            @click="page.to(`/pages-sub/artist/index?id=${item.id}`)"
          >
            <image class="img" :src="item.avatar" mode="aspectFill" />
            <div class="name">{{ item.artName }}</div>
          </div>
        </div>
      </template>
    </LoadPage>
  </div>
</template>

<script lang="ts" setup>
import { getDict } from '@/utils/index'
import page from '@/utils/page'

const filter = reactive({
  artName: '',
  classify: '',
})

const tab = ref<number>(0)
const tabList = ref([{ title: '全部', value: '' }])

// code:[民宿分类:homestay_classify,活动分类:activity_classify,艺术家分类:artist_classify]
getDict('artist_classify').then((res: any) => {
  if (res && res.length > 0) {
    res.forEach((item) => {
      tabList.value.push({
        title: item.dictValue,
        value: item.dictKey,
      })
    })
  }
})

// 上拉加载
const loadPage = ref()
onReachBottom(() => {
  loadPage.value?.getMore(filter)
})

// 下拉刷新
onPullDownRefresh(() => {
  loadPage.value?.getData(filter, true)
})

function getData() {
  uni.startPullDownRefresh()
}

function tabChange(e) {
  filter.classify = e.name
  getData()
}
</script>

<style scoped lang="scss">
.list {
  .input-box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100vw;
    height: 124rpx;
    padding: 0rpx 30rpx;
    background-color: #fff;
    .input {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 100%;
      height: 80rpx;
      padding: 0 30rpx;
      background: var(--bgc4);
      border-radius: 40rpx;
      --wot-input-bg: var(--bgc4);
      --wot-input-icon-color: var(--color4);
      --wot-input-placeholder-color: var(--color4);
      :deep(.wd-input) {
        width: 100%;
      }
    }
  }

  .people-list {
    display: grid;
    grid-area: 32rpx;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 30rpx;
    .people {
      text-align: center;
      .img {
        width: 200rpx;
        height: 200rpx;
        background-color: var(--bgc4);
        border-radius: 100rpx;
      }
      .name {
        margin-top: 20rpx;
        margin-bottom: 50rpx;
        font-size: 30rpx;
        color: var(--color1);
      }
    }
  }
}
</style>
